<script>
import Page1 from "../components/page1.vue";
import Page2 from "../components/page2.vue";

import { ref } from "vue";
export default {
  setup() {
    const btn = ["page1", "page2"];
    const num = ref(0);
    const change = () => {
      switch (num.value) {
        case 0:
          return <Page1></Page1>;

        default:
          return <Page2></Page2>;
      }
    };
    const toChange = (n) => {
      num.value = n;
    };
    // const usetoast = () => {
    //   console.log();
    // };

    return {
      btn,
      num,
      change,
      toChange,
      // usetoast,
    };
  },
  render() {
    return (
      <>
        <div>
          动态组件
          <div class="my">
            {this.btn.map((ele, index) => (
              <span
                className={index == this.num.value ? "action" : ""}
                // className={"action"}
                onClick={() => {
                  this.toChange(index);
                }}
              >
                {" "}
                {ele}{" "}
              </span>
            ))}
          </div>
          {this.change()}
        </div>
        <hr />

        <div>
          动态路由
          <router-view></router-view>
        </div>

        <hr />

        <div>
          <button onClick={() => {this.$toast.show("这是一个插件", 2000)}}>自定义插件</button>
        </div>
      </>
    );
  },
};
</script>

<style lang="less" scoped>
.my {
  span {
    display: inline-block;
    margin-right: 10px;
    &.action {
      color: deepskyblue;
    }
  }
}
</style>